<template>
	<view class="index">
		<view v-for="(item, index) in introduces" :key="item.introduceId" class="culture" @click="to(item.introduceId)">
			<view class="images">
				<image :src="item.image"></image>
			</view>
			<text class="title">
				{{ item.title }}
			</text>
		</view>
	</view>
</template>

<script>
	import store from '@/store/index.js'
	import {
		mapState,
		mapMutations,
		mapActions,
		mapGetters
	} from 'vuex'
	export default {
		name: "introduce",
		data() {
			return {}
		},
		methods: {
			...mapMutations('course', ['getIntroduces']),
			to(e) {
				console.log(e);
				uni.navigateTo({
					url: `/pages/index/introduce-detail/introduce-detail?id=${e}`,
				});
			},
		},
		computed: {
			...mapState('course', ['introduces']),
		},
		created() {
			this.getIntroduces()
		}
	};
</script>

<style lang="scss" scoped>
	.culture {
		width: 90vw;
		margin: 0 auto;
		display: flex;
		//background-color: indianred;
		margin-bottom: 20rpx;
		padding-bottom: 15rpx;
		border-bottom: 3rpx solid (223, 226, 229);
	}

	.images {
		width: 40vw;
		height: 30vw;
		background-color: bisque;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	image {
		width: 36vw;
		height: 27vw;
		mode: widthFix;
		border-radius: 2vw;
	}
</style>